<template>
  <d2-container class="page">
    <el-row  :gutter="20">
      <el-col :span="8" :offset="2">
        <el-button type="primary" plain @click="addParams()" >新增条件</el-button>
        <!-- <el-tooltip content="刷新重置" placement="top" effect="light"><el-button type="primary" plain icon="el-icon-refresh" @click="refreshParams"></el-button></el-tooltip> -->
        <el-button type="success" plain icon="el-icon-upload" @click="saveParams" >保存</el-button>
      </el-col>
      <el-col :span="10">
          <el-select filterable v-model="searchParam.lb" placeholder="请选择类型" clearable @change="filterParams">
            <el-option v-for="item in equis" :label="item.lb" :value="item.lb" :key="item.lb"></el-option>
          </el-select>
          <el-select filterable v-model="searchParam.zb" placeholder="请选择装备" clearable @change="filterParams">
            <el-option  v-for="item in getZbList(equisMap[searchParam.lb])" :label="item" :value="item" :key="item"></el-option>
          </el-select>
      </el-col>
      
      <el-col :span="3" ><el-tooltip content="刷新重置" placement="top" effect="light"><el-button type="primary" plain icon="el-icon-refresh" @click="refreshParams"></el-button></el-tooltip></el-col>
      <!-- <el-col :span="3" ><el-button type="success" plain icon="el-icon-upload" @click="saveParams">保存</el-button></el-col> -->
    </el-row>
    <el-row  :gutter="20">
      <el-form ref="form" :model="from" label-width="80px" size="mini">
        <el-table :data="params" border style="width: 100%" size="mini" height="750">
          <el-table-column type="expand" >
            <template slot-scope="scope" v-if="scope.row.sxList.length>0 && !scope.row.anyone">
                <el-checkbox size="mini" v-for="(sx,si) in scope.row.sxList" :key= "sx.name" v-model="scope.row.sxList[si].checked">
                  {{ scope.row.sxList[si].name }}
                </el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <el-select size="mini" filterable v-model="scope.row.lb" placeholder="请选择类型" @change="handleSelectedLbChange(scope.row)">
                <el-option v-for="item in equis" :label="item.lb" :value="item.lb" :key="item.lb" ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="装备">
            <template slot-scope="scope">
              <el-select size="mini" filterable v-model="scope.row.zb" placeholder="请选择装备" @change="handleSelectedZbChange(scope.row)">
                <el-option v-for="item in equisMap[scope.row.lb].zbList" :label="item" :value="item" :key="item" ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="套装属性">
            <template slot-scope="scope" v-if="scope.row.sxList.length>0">
              <el-select size="mini" filterable v-model="scope.row.set" multiple placeholder="请选择" >
                <el-option v-for="item in suitProps" :key="item" :label="item" :value="item"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="任意(基本属性1次+)" width="160">
            <template slot-scope="scope" v-if="scope.row.sxList.length>0">
              <el-switch v-model="scope.row.anyone"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否告警" width="160">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.warn" active-color="#13ce66"  inactive-color="#FFCCD6"></el-switch>
            </template>
          </el-table-column>
           <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了'  icon="el-icon-info" icon-color="red" title="确定删除该配置？" @confirm="delParam(scope.$index)">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" >删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-row> 


  </d2-container>
</template>

<script>
export default {
  data() {
    return {
      equis: [],
      equisMap: {},
      params: [],
      from: {},
      index:0,
      suitProps:[],
      searchParam:{lb:"",zb:""},
      otherParams:[]
    }
  },
  methods: {
    addParams() {
      this.params.unshift({zb:"",lb:"0-剑",anyone:false,warn:false,sxList:[],set:[]})
    },
    delParam(index){
      console.log("index",index)
      this.delVisible = false
      this.params.splice(index,1)
    },
    anyoneChange(index){
      console.log("index",index)
    },
    filterParams(){
      console.log("filterParams")
      var allParams = this.params.concat(this.otherParams);
      this.otherParams = []
      this.params = []
      allParams.forEach((item, index,arr)=>{
          let flag = true
          if(this.searchParam.lb){
            flag = item.lb==this.searchParam.lb
          }
          if(flag && this.searchParam.zb){
            flag = item.zb==this.searchParam.zb
          }
          if(flag){
            this.params.push(item)
          }else{
            this.otherParams.push(item)
          }
      })
      this.params.sort(function(a,b){
        if(a.lb === b.lb){//如果id相同，按照age的降序
          return a.zb.localeCompare(b.zb,'zh-CN')
        }else{
          return a.lb.localeCompare(b.lb,'zh-CN')
        }
		  })
    },
    saveParams(){
      this.$confirm('确认保存？')
        .then(_ => {
          this.params = this.params.concat(this.otherParams);
          console.log(this.params)
          let flag = true
          for(var i=0;i<this.params.length;i++ ){
            if(!this.params[i].zb){
              flag = false
              break
            }
          }
          if(flag){
            this.saveParamsApi()
          }else{
            this.$message.error('有空的装备，请选择后再保存');
          }
        });
    },
    refreshParams(){
      this.$confirm('确认刷新？')
        .then(_ => {
          this.init()
        })
        .catch(_ => {});
    },
    handleSelectedLbChange(row){
      row.zb = ""
      row.sxList = []
    },
    handleSelectedZbChange(row){
      let clone = this.deepClone(this.equisMap[row.lb].sxList)
      row.sxList = clone
    },
    getZbList(p){
      if(p){
        return p.zbList
      }
      return []
    },
    getSxCheckList(sxList){
      var checkList = []
      sxList.forEach(element => {
        if(element.checked===true){
          checkList.push(element.name)
        }
      })
      return checkList
    },
    deepClone(obj) {
      let newObj = Array.isArray(obj) ? [] : {}
      if (obj && typeof obj === "object") {
          for (let key in obj) {
              if (obj.hasOwnProperty(key)) {
                  newObj[key] = (obj && typeof obj[key] === 'object') ? this.deepClone(obj[key]) : obj[key];
              }
          }
      }
      return newObj
    },
    initEquisMap(){
      let map = {}
      // let equisList = this.equis
      // console.log("equisList",equisList)
      // for (const row in equisList) {
      //   map[row.lb] = {lb: row.lb, zbList: row.zbList,sxList:row.sxList}
      // }
      console.log("this.equis",this.equis.length)
      this.equis.forEach(row => {
        map[row.lb] = {lb: row.lb, zbList: row.zbList,sxList:row.sxList}
      })
      console.log("map",map)
      this.equisMap = map
    },
    async initEquis () {
      try {
        const res = await this.$api.FILE_GET("json/data.json")
        // console.log("initEquis",res)
        this.equis = res
        this.initEquisMap()
        this.initParams()
      } catch (error) {
        console.log(error)
      }
    },
    async initSuitProps () {
      try {
        const res = await this.$api.FILE_GET("json/suitProps.json")
        console.log("initSuitProps",res)
        this.suitProps = res
      } catch (error) {
        console.log(error)
      }
    },
    async saveParamsApi () {
      try {
        const res = await this.$api.PARAMS_SAVE(this.params)
        console.log("saveParamsApi",res)
        this.init()
      } catch (error) {
        console.log(error)
      }
    },
    async initParams () {
      try {
        const res = await this.$api.PARAMS_GET()
        // const res = await this.$api.FILE_GET("json/param.json")
        console.log("initParams",res)
        // this.params = [{"anyone":true,"lb":"2-槌-权杖","set":[],"sxList":[{"checked":false,"name":"杀怪回魔法值"},{"checked":false,"name":"杀怪回生命值"},{"checked":false,"name":"攻击速度+7"},{"checked":false,"name":"攻击力+2%"},{"checked":false,"name":"攻击力+等级/20"},{"checked":false,"name":"卓越一击+10%"}],"zb":"圣光权杖"},{"anyone":true,"lb":"0-剑","set":[],"sxList":[{"checked":false,"name":"杀怪回魔法值"},{"checked":false,"name":"杀怪回生命值"},{"checked":false,"name":"攻击速度+7"},{"checked":false,"name":"攻击力+2%"},{"checked":false,"name":"攻击力+等级/20"},{"checked":false,"name":"卓越一击+10%"}],"zb":"破坏之剑"},{"anyone":true,"lb":"4-弓","set":[],"sxList":[{"checked":false,"name":"杀怪回魔法值"},{"checked":false,"name":"杀怪回生命值"},{"checked":false,"name":"攻击速度+7"},{"checked":false,"name":"攻击力+2%"},{"checked":false,"name":"攻击力+等级/20"},{"checked":false,"name":"卓越一击+10%"}],"zb":"碧影魔弓"},{"anyone":false,"lb":"12-翼-石","set":[],"sxList":[],"zb":"玛雅之石"},{"anyone":false,"lb":"16-指环","set":[],"sxList":[{"checked":true,"name":"生命值+4%"},{"checked":false,"name":"魔法值+4%"},{"checked":true,"name":"伤害减少+4%"},{"checked":false,"name":"伤害反射+5%"},{"checked":false,"name":"防御率+10%"},{"checked":false,"name":"金钱增加+40%"}],"zb":"火之指环"},{"anyone":false,"lb":"16-指环","set":[],"sxList":[{"checked":true,"name":"生命值+4%"},{"checked":false,"name":"魔法值+4%"},{"checked":true,"name":"伤害减少+4%"},{"checked":false,"name":"伤害反射+5%"},{"checked":false,"name":"防御率+10%"},{"checked":false,"name":"金钱增加+40%"}],"zb":"毒之指环"},{"anyone":false,"lb":"16-指环","set":[],"sxList":[{"checked":true,"name":"生命值+4%"},{"checked":false,"name":"魔法值+4%"},{"checked":true,"name":"伤害减少+4%"},{"checked":false,"name":"伤害反射+5%"},{"checked":false,"name":"防御率+10%"},{"checked":false,"name":"金钱增加+40%"}],"zb":"冰之指环"},{"anyone":false,"lb":"16-指环","set":[],"sxList":[{"checked":true,"name":"生命值+4%"},{"checked":false,"name":"魔法值+4%"},{"checked":true,"name":"伤害减少+4%"},{"checked":false,"name":"伤害反射+5%"},{"checked":false,"name":"防御率+10%"},{"checked":false,"name":"金钱增加+40%"}],"zb":"地之指环"},{"anyone":false,"lb":"16-指环","set":[],"sxList":[{"checked":true,"name":"生命值+4%"},{"checked":false,"name":"魔法值+4%"},{"checked":true,"name":"伤害减少+4%"},{"checked":false,"name":"伤害反射+5%"},{"checked":false,"name":"防御率+10%"},{"checked":false,"name":"金钱增加+40%"}],"zb":"魔之指环"},{"anyone":false,"lb":"16-指环","set":[],"sxList":[{"checked":true,"name":"生命值+4%"},{"checked":false,"name":"魔法值+4%"},{"checked":true,"name":"伤害减少+4%"},{"checked":false,"name":"伤害反射+5%"},{"checked":false,"name":"防御率+10%"},{"checked":false,"name":"金钱增加+40%"}],"zb":"风之指环"}]
        this.params = res.data
        this.otherParams = []
        this.filterParams()
      } catch (error) {
        console.log(error)
      }
    },
    init() {
      this.flashVisible=false
      this.initEquis()
      this.initSuitProps()
      
      this.searchParam={lb:"",zb:""}
    },
  },
  created() {
    this.init()
    console.info(this.equis)
  },
}
</script>

<style scoped>
.el-row {
    margin-bottom: -10px;
  }
</style>
